<template>
	<view class="patrol bg">
		<uni-nav-bar
			:fixed="true"
			:statusBar="true"
			title="用户广告列表" 
			color="#fff" 
			background-color="#3a8fed">
			<block slot="right">
				<view class="nav-bar-btns">
					<view class="nav-bar-btns-item">
						<view class="nav-bar-btn">
							<image 
								class="nav-bar-btn-icon" 
								mode="aspectFit" 
								src="@/static/icon/icon_map.png"
								@tap="openWin('/pages/media/map')">
							</image>
						</view>
					</view>
					<view class="nav-bar-btns-item">
						<view class="nav-bar-btn" @tap="openCondition">
							<image 
								class="nav-bar-btn-icon" 
								mode="aspectFit" 
								src="@/static/icon/icon_filter.png">
							</image>
						</view>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		
		<view class="list">
			<view class="list-group">
				<view class="list-item" v-for="(media, index) in medias" :key="index">
					<view class="card">
						<view class="card-left" @tap="viewPic(media.src)">
							<image class="img" mode="aspectFit" :src="media.album ? media.album[0] : media.src[0]"></image>
						</view>
						<view class="card-mid">
							<view class="card-mid-group">
								<view class="card-title">{{ media.building_point_name }}</view>
								<view class="card-des">广告类别：{{ media.ad_type | getDictLabel(adTypes, 'dict_value')}}</view>
								<view class="card-des">媒体类型：{{ `${media.media_type_lv1_name || ''}${media.media_type_lv2_name || ''}${media.media_type_lv3_name || ''}` }}</view>
								
								<view class="card-des">设施类型：{{ media.facility_type | getDictLabel(facilityTypes, 'dict_value')}}</view>
								
								<view class="card-des">地址：{{ media.describe_address }}</view>
							</view>
						</view>
						<view class="card-right">
							<button class="btn" @tap="openDel(media)">详情</button>
						</view>
					</view>
				</view>
				
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		
		<condition ref="condition" :condition="conditionParams" @sendParams="getOtherParams"></condition>
	</view>
</template>

<script>
import { queryNearbyMedia2, getDicts } from '@/api/configure.js';
import { deepClone, getToken, toLogin, getLocation, moveToLocation, mergeUrls, cleanData, previewImage} from '@/util/util.js';
import Condition from '@/components/condition/media.nvue';
import configUrl from '@/util/url.js';

export default {
	components: {Condition},
	data() {
		return {
			latitude: '',   //维度
			longitude: '', //精度
			pageNum: 1,
			pageSize: 5,
			total: 100,
			status: 'more',
			medias: [],
			numb: 300,
			adTypes: [],
			setTypes: [],
			facilityTypes: [],
			conditionParams: {
				numb: 300
			}
		}
	},
	methods: {
		async openCondition() {
			this.$refs.condition.open();
		},
		async closeCondition() {
			this.$refs.condition.close();
		},
		openWin(url) {
			url = mergeUrls(url, {});
			
			uni.navigateTo({
				url
			});
		},
		openDel(media) {
			let data = {type: 'edit', mediaId: media.media_id};
	
			let url = mergeUrls('/pages/code/index', data);
			
			uni.navigateTo({
				url
			});
		},
		async getMedias() {
			let medias;
			
			let params = {
				lng: this.longitude,
				lat: this.latitude,
				numb: this.numb,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
			
			Object.assign(params, this.otherParams);
			
			let { rows , total} = await queryNearbyMedia2(params);
			
			if(rows && rows.length > 0){
				medias = rows.slice(0);
				
				medias = medias.map( media => {
					let urls = [];
					let albumUrls = []
					
					if(media.path) {
						if (media.path.indexOf(",") == -1) {
							urls = [`${configUrl.CASEIMAGE_URL}${media.path.substr(1)}`];
							albumUrls = [`${configUrl.CASEIMAGE_URL}smallOutdoor${media.path}`]
						} else {
							urls = media.path.split(',').map((url) => `${configUrl.CASEIMAGE_URL}${url.substr(1)}`);
							albumUrls = media.path.split(',').map((url) => `${configUrl.CASEIMAGE_URL}smallOutdoor${url}`);
						}
					}
					
					media.src = urls;
					
					if(media.media_id < 10553){
						media.album = albumUrls;
					}
					
					return media;
				})
			}
			
			this.total = total;
			
			if (this.pageNum * this.pageSize >= this.total) {
				this.status = "noMore";
			} else {
				this.status = "more";
			}
			
			return medias;
		},
		async updateMedias() {
			this.resetPage();
			
			let medias = await this.getMedias();
			
			if(medias && medias.length > 0){
				this.medias = [...this.medias, ...medias];
			}
		},
		async queryMedias() {
			let medias = await this.getMedias();
			
			if(medias && medias.length > 0){
				this.medias = [...this.medias, ...medias];
			}
		},
		async getDicts() {
			let ds = [
				getDicts({'type': 'selectAdType'}), 
				getDicts({'type': 'selectSetType'}), 
				getDicts({'type': 'selectFacilityType'})
			];
			
			let dits = await Promise.all(ds);
			
			
			
			this.adTypes = dits[0].data.slice(0);
			
			this.setTypes = dits[1].data.slice(0);
			this.facilityTypes = dits[2].data.slice(0);
		},
		async createOtherParams(res) {
			let otherParams = res;
			
			this.otherParams = cleanData(otherParams);
			
			this.$store.dispatch({
				type: 'setMediaOtherParams',
				params: otherParams
			});
		},
		async getOtherParams(res) {
			this.resetPage();
			
			await this.createOtherParams(res);
			await this.queryMedias();
			this.closeCondition();
		},
		async viewPic(urls) {
			let obj = {
				current: 0,
				urls: urls
			}
			
			previewImage(obj);
		},
		resetPage() {
			this.pageNum = 1;
			this.pageSize = 5;
			this.medias = [];
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		async init() {
			await this.getDicts();
			await this.createOtherParams(this.mediaOtherParams);
			
			this.conditionParams = cleanData(this.mediaOtherParams);
			
			await this.queryMedias();
		}
	},
	computed: {
		mediaOtherParams() {
			return this.$store.state.mediaOtherParams;
		}
	},
	onLoad(option) {
		this.longitude = option.longitude;
		this.latitude = option.latitude;
			
		uni.$on('refreshMediaList', () => {
			this.medias = [];
			this.updateMedias();
		})
		
		this.init();
	},
	onUnload() {
		uni.$off('refreshMediaList');
	},
	onReady() {},
	onReachBottom() {
		if (this.pageNum * this.pageSize >= this.total) {
			this.status = "noMore";
			return;
		} else {
			this.pageNum = this.pageNum + 1;
			this.status = 'loading';
		}
	
		setTimeout(() => {
			this.queryMedias();
		}, 300);
	},
	onPullDownRefresh() {}
}
</script>

<style lang="scss">
	.nav-bar-btns{
		display: flex;
		flex-direction: row;
	}
	
	.nav-bar-btns-item{
		padding: 5px;
		display: flex;
	}
	
	.nav-bar-btn{
		display: flex;
	}
	.nav-bar-btn-icon{
		height: 24px;
		width: 24px;
	}
	
	.list{
		.list-group{
			padding: 21rpx 21rpx 0rpx;
			.list-item{
				margin-bottom: 31rpx;
			}
		}
	}
	
	.card{
		padding: 26rpx 21rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: nowrap;
		.card-left{
			width: 201rpx;
			height: 201rpx;
			.img{
				width: 201rpx;
				height: 201rpx;
			}
		}
		
		.card-mid{
			width: calc(100% - 328rpx);
			.card-mid-group{
				padding: 0rpx 34rpx 0rpx 29rpx;
				overflow: hidden;
			}
			.card-title{
				margin-bottom: 9rpx;
				font-size: 34rpx;
				line-height: 42rpx;
				color: #000000;
			}
			.card-des{
				width: 100%;
				margin-bottom: 9rpx;
				font-size: 26rpx;
				line-height: 32rpx;
				color: #9b9b9b;
				overflow: hidden;
				text-overflow:ellipsis; 
				white-space: nowrap;
			}
		}
		
		.card-right{
			width: 127rpx;
			display: flex;
			align-items: flex-end;
			.btn{
				width: 100%;
				padding: 5rpx 0rpx;
				border-radius: 12rpx;
				font-size: 26rpx;
				line-height: 32rpx;
				color: #ffffff;
				background: none;
				background-image: linear-gradient(to right, #44afee, #3a8eed);
			}
		}
	}
</style>
